import {designComponent, designPage, PropType} from "plain-ui-composition";
import {useVisualEditor} from "./useVisualEditor";
import {predefineComponentConfig} from "../public/predefineComponent.config";
import {predefineComponentRender} from "../public/predefineComponent.render";
import {predefineActionRender} from "../public/predefineAction.render";
import {predefineActionConfig} from "../public/predefineAction.config";
import VisualEditor from "../../packages/editor/VisualEditor";
import {iVisualData} from "../../packages/utils/types.base";
import {useRemoveData} from "./useRemoteData";
import {reactivityApi} from "../../packages/utils/vueReactivityApi";
import {predefineBindingValue} from "../public/predefineBindingValue";
import {predefineBindingConfig} from "../public/predefineBinding.config";

const Editor = designComponent({
  props: {
    data: { type: Object as PropType<iVisualData>, required: true }
  },
  setup({ props }) {

    const editor = useVisualEditor({
      /*数据*/
      data: props.data,
    });
    /*预定义的组件渲染*/
    predefineComponentRender({ api: reactivityApi, componentRender: editor.components.render, bindingValue: editor.binding.value });
    /*预定义的组件配置*/
    predefineComponentConfig({ config: editor.components.config, binding: editor.binding, methods: editor.methods });
    /*预定义动作渲染*/
    predefineActionRender({ actionRender: editor.action.render });
    /*预定义动作配置*/
    predefineActionConfig({ config: editor.action.config });
    /*预定义绑定值定义*/
    predefineBindingValue({ bindingValue: editor.binding.value });
    /*预定义绑定配置定义*/
    predefineBindingConfig({ bindingConfig: editor.binding.config });

    return () => (
      <VisualEditor editor={editor}/>
    );
  },
});

export const App = designPage(() => {

  const data = useRemoveData();

  return () => (
    <>
      {!!data.value && <Editor data={data.value}/>}
      {/*热区测试*/}
      {/*<DemoImageRange/>*/}
    </>
  );
});
